<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>订单页面</title>
		<link rel="shortcut icon" href="./../../favicon.ico">
		<link rel="stylesheet" href="../../style/cart/shoppingCart.css">
		<script type="text/javascript" src="./../../plugins/jQuery/jquery-3.6.0.js"></script>
		<script type="text/javascript" src="./../../plugins/vue/vue.js"></script>
		<script type="text/javascript" src="./../../plugins/axios/axios.js"></script>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="./../../plugins/element-ui/index.css">
		<!-- 引入组件库 -->
		<script src="./../../plugins/element-ui/index.js"></script>
		<!-- 引入layer -->
		<script src="../../plugins/layer-master/dist/layer.js"></script>
		<style>
			.el-table {
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!--添加地址的抽屉-->
			<el-drawer title="添加我的地址" :visible.sync="add_address_drawer" direction="rtl" :before-close="handleClose">
				<el-form ref="form" :model="saveAddressForm" label-width="150px">
					<el-form-item label="收货人姓名">
						<el-input v-model="saveAddressForm.name"></el-input>
					</el-form-item>
					<el-form-item label="收货人电话">
						<el-input v-model="saveAddressForm.phone"></el-input>
					</el-form-item>
					<el-form-item label=" 收货人地址">
						<el-input v-model="saveAddressForm.address"></el-input>
					</el-form-item>
					<el-form-item label="是否为常用地址">
						<el-switch v-model="saveAddressForm.delivery"></el-switch>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="saveLogistics">添加新地址</el-button>
						<el-button>取消</el-button>
					</el-form-item>
				</el-form>
			</el-drawer>

			<nav class="public-header">
				<a href="../../index.html">网站首页</a>
				<a href="./order.html">我的订单</a>
				<a href="">我的地址</a>
			</nav>
			<div class='cart'>
				<h3>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;&nbsp;&nbsp;我的常用地址
					<el-button class="el-icon-circle-plus" size="mini" @click="add_address_drawer=true"></el-button>
				</h3>
				<div v-for="a in addresss">
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<el-radio v-model="choose_id" :label='a.id' border>
						姓名：{{a.logisticsName}}，手机号：{{a.logisticsPhone}}，地址：{{a.logisticsAddress}}
					</el-radio>
				</div>

			</div>
			<div class="cart">
				<template>
					<el-table ref="multipleTable" :data="order_items" tooltip-effect="dark" style="width: 87%">
						<el-table-column label="商品" width="220" align="center">
							<template slot-scope="scope">
								<img width="120px" :src=`http:${scope.row.imageName}`>
							</template>
						</el-table-column>
						<el-table-column label="书名" align="center">
							<template slot-scope="scope">
								{{scope.row.name}}
							</template>
						</el-table-column>
						<el-table-column label="出版社" align="center">
							<template slot-scope="scope">
								{{scope.row.publisher}}
							</template>
						</el-table-column>
						<el-table-column prop="price" label="单价" width="120" align="center">
							<template slot-scope="scope">

								<span v-if="scope.row.discountRate===null">
									￥{{scope.row.price}}元
								</span>
								<span style="text-decoration: line-through" v-else>
									<small>￥</small>{{scope.row.price}}
								</span>
								<span v-if="scope.row.discountRate!==null">
									<small>￥</small>{{(scope.row.discountRate*scope.row.price).toFixed(2)}}
								</span>
							</template>
						</el-table-column>
						<el-table-column prop="cartNum" label="数量" show-overflow-tooltip align="center" width="200px">
							<template slot-scope="scope">
								{{scope.row.cartNum}}
							</template>

						</el-table-column>
						<el-table-column prop="price" label="小计" show-overflow-tooltip align="center" width="120">
							<template
								slot-scope="scope">￥{{ scope.row.discountRate===null?(scope.row.price * scope.row.cartNum).toFixed(2):(scope.row.discountRate*scope.row.price * scope.row.cartNum).toFixed(2) }}元</template>
						</el-table-column>
					</el-table>

					<div class="cart-btn"><span>总价：</span><span> ¥ {{total_price}}元</span>
						<button class="btn" @click="pay">去支付</button>
					</div>
				</template>
				<!-- 页脚部分 -->
				<div class="extra">
					<div class="wrapper">
						<!-- 版权信息 -->
						<div class="copyright">
							<p>
								<a href="javascript:;">关于我们</a>
								<a href="javascript:;">帮助中心</a>
								<a href="javascript:;">售后服务</a>
								<a href="javascript:;">配送与验收</a>
								<a href="javascript:;">商务合作</a>
								<a href="javascript:;">搜索推荐</a>
								<a href="javascript:;">友情链接</a>
							</p>
							<p>CopyRight &copy; 湖北理工学院</p>
						</div>
					</div>
				</div>
			</div>
		</div>

	</body>
</html>
<script>
	new Vue({
		el: '#app',
		data() {
			return {
				addresss: [],
				order_items: [],
				total_price: 0,
				choose_id: '',
				add_address_drawer: false,
				saveAddressForm: {
					name: '',
					phone: '',
					address: '',
					delivery: true
				},
				order: {
					totalCount: 0,
					totalAmount: 0,
					orderItems: []
				}
			}
		},
		methods: {
			loadMyAddress() {
				axios({
					method: 'get',
					url: 'http://localhost:9000/logistics/find_by_id',
					headers: {
						token: localStorage.getItem('token')
					}
				}).then(resp => {
					this.addresss = resp.data.data
					this.choose_id = this.addresss[0].id

				})
			},
			loadMyCarts() {
				let selected_cart_item = sessionStorage.getItem('selected_cart_item')
				// console.log(selected_cart_item)
				this.order_items = JSON.parse(selected_cart_item)
				let total = 0
				for (let i = 0; i < this.order_items.length; i++) {
					let book = this.order_items[i]
					if (book.discountRate == null) {
						total = total - 0 + ((book.price * book.cartNum).toFixed(2) - 0)
					} else {
						total += ((book.discountRate * book.price * book.cartNum).toFixed(2) - 0)
					}
				}
				this.total_price = total
			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			saveLogistics() {
				let data = new URLSearchParams()
				data.append('logisticsName', this.saveAddressForm.name)
				data.append('logisticsAddress', this.saveAddressForm.address)
				data.append('logisticsPhone', this.saveAddressForm.phone)
				data.append('status', this.saveAddressForm.delivery ? 1 : 2)
				axios({
					method: 'post',
					url: 'http://localhost:9000/logistics',
					data: data,
					headers: {
						token: localStorage.getItem('token')
					}
				}).then(resp => {
					this.loadMyAddress()
					this.add_address_drawer = false
				})
			},
			pay() {
				// 1. 生成订单
				this.order.totalCount = this.order_items.length
				this.order.totalAmount = this.total_price
				for (let i = 0; i < this.order_items.length; i++) {
					let b = this.order_items[i]
					let obj = {
						'bookId': b.id,
						'price': b.discountRate == null ? (b.price) : (b.price * b.discountRate),
						'number': b.cartNum
					}
					this.order.orderItems.push(obj)
				}
				console.log(this.order)
				axios({
					method: 'post',
					url: 'http://localhost:9000/order',
					data: this.order,
					headers: {
						'token': localStorage.getItem('token'),
						'Content-Type': 'application/json'
					}
				}).then(resp => {
					if (resp.data.success) {
						let orderId = resp.data.data
						// 2. 去支付
						location.href = 'http://localhost:9000/alipay/pay?out_trade_no=' + orderId +
							'&total_amount=' +
							this.total_price + '&subject=' + orderId + '的订单&logisticsId=' + this.choose_id
					}
				})
			}

		},
		created() {
			this.loadMyCarts()
			this.loadMyAddress()
		}
	})
</script>